<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div style="width:100%;height:700px;float:left; padding:10px 0;">
    <div style="width:100%;margin-left: 30px;margin-bottom: 20px;">
      <strong>所属学校：</strong><el-select ref="optionRef_school" v-model="ssxx" style="width:12%;height: 33px;margin-right: 20px;border: 1px solid #DCDFE6;border-radius: 4px;text-align: center" @change="getOrgBySchool">
        <el-option v-for="x in this.school_data" :key="x.id" :label="x.orgName" :value='x.id'>{{x.orgName}}</el-option>
      </el-select>
      <strong>所属食堂：</strong><el-select ref="optionRef_org" v-model="ssjg" style="width:12%;height: 33px;margin-right: 20px;border: 1px solid #DCDFE6;border-radius: 4px;text-align: center">
        <el-option v-for="x in this.jg_data" :key="x.id" :label="x.orgName" :value='x.id'>{{x.orgName}}</el-option>
      </el-select>
      <strong>开始时间：</strong><el-date-picker clearable v-model="start_date" style="width: 12%;margin-right: 20px;" type="date" value-format="yyyy-MM-dd" placeholder="请输入开始时间"></el-date-picker>
      <strong>结束时间：</strong><el-date-picker clearable v-model="end_date" style="width: 12%;" type="date" value-format="yyyy-MM-dd" placeholder="请输入结束时间"></el-date-picker>
      <el-button style="background-color:limegreen;color: #FFFFFF;margin-left: 10px;" @click="query">点击查询</el-button>
    </div>
    <div id="myChart" style="width:80%;height:100%;margin:0 auto;"></div>
  </div>
</template>

<script>
import { getGstdd,getOrg,getSchool } from "@/api/system/order";
export default {
  name: "Echarts",
  data () {
    return {
      school_data:[],
      jg_data: [],
      ssxx:"",
      ssjg:"",
      start_date:"",
      end_date:"",
      s_lable:[],
      s_data:[],
      //学校名称
      ssxx_n:"",
      //机构名称
      ssjg_n:""
    }
  },
  created()  {
    // 获取当前时间
    this.getDate();
    // 加载学校站点信息,联动机构信息
    this.getSelectSchoolList();
    //模拟数据
    this.s_lable=['商家一','商家二','商家三'];
    this.s_data=[{name:'商家一',value:10},{name:'商家二',value:20},{name:'商家三',value:30}];
  },
  methods:{
    //点击查询
    query(){
      if(this.ssxx==null||this.ssxx==''||this.ssxx=='undefined'){
        alert('所属学校不能为空！');
        return false;
      }
      if(this.ssjg==null||this.ssjg==''||this.ssjg=='undefined'){
        alert('所属机构不能为空！');
        return false;
      }
      if(this.start_date==null||this.start_date==''||this.start_date=='undefined'){
        alert('开始时间不能为空！');
        return false;
      }
      if(this.end_date==null||this.end_date==''||this.end_date=='undefined'){
        alert('结束时间不能为空！');
        return false;
      }
      //拼接返回字符串
      let data = this.ssxx+','+this.ssjg+','+this.start_date+','+this.end_date;
      getGstdd(data).then(response => {
        //获取下拉框选中的值
        this.ssxx_n = this.$refs.optionRef_school.selected.label;
        this.ssjg_n = this.$refs.optionRef_org.selected.label;
        //模拟数据
        this.s_lable=['商家四','商家五','商家六','商家七'];
        this.s_data=[{name:'商家四',value:10},{name:'商家五',value:20},{name:'商家六',value:30},{name:'商家七',value:50}];
        this.getEcharts();
      });
    },

    // 默认获取当前月份1号至下月1号数据
    getDate(){
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      this.start_date=year+"-"+(month<10?'0'+month:month)+"-"+"01";
      if(month==12){
        this.end_date=(year+1)+"-01-"+"01";
      }else{
        this.end_date=year+"-"+((month+1)<10?'0'+(month+1):(month+1))+"-"+"01";
      }
    },

    // 获取所有学校
    getSelectSchoolList(){
      getSchool().then(response => {
        this.school_data=response.data;
        //默认赋值为数组的第一个
        this.ssxx=response.data[0].id;
        this.ssxx_n=response.data[0].orgName;
        // 页面第一次加载默认加载机构信息
        this.getOrgBySchool(response.data[0].id);
      });
    },

    // 根据学校获取学校下的部门信息
    getOrgBySchool(key){
      getOrg(key).then(response => {
        this.jg_data=response.data;
        this.ssjg=response.data[0].id;
        this.ssjg_n=response.data[0].orgName;
        // 切换学校站点信息，给echarts图赋值
        this.ssxx_n =this.$refs.optionRef_school.selected.label;
        // 首次加载统计图
        this.getInitEcharts();
      });
    },

    //设置第一次默认加载页面的数据，为部门的第一个，时间为当前月份，并回显月份开头至结束
    getInitEcharts(){
      //拼接返回字符串
      let data = this.ssxx+','+this.ssjg+','+this.start_date+','+this.end_date;
      getGstdd(data).then(response => {
        /*//模拟数据
        this.s_lable=['商家四','商家五','商家六','商家七'];
        this.s_data=[{name:'商家四',value:10},{name:'商家五',value:20},{name:'商家六',value:30},{name:'商家七',value:50}];*/
        this.getEcharts();
      });
    },
    //加载echarts图
    getEcharts(){
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '食堂商家订单数量统计',
          subtext: '当前数据：【'+this.ssxx_n+'（'+this.ssjg_n+'）】',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data:this.s_lable
        },
        series: [
          {
            name: '商家名称',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: this.s_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  }
};
</script>
